<template>
  <div class="up-info-body">
    <div class="info-body-div" v-if="isshow">
      <p>用户通行证：</p>
      <span>{{userAccount}}</span>
      <p>用户电子邮箱：</p>
      <span>{{userEmail}}</span>
      <p>用户类型：</p>
      <span>{{type}}</span>
      <p>用户余额：</p>
      <span>{{balance}}</span>
      <p>用户注册时间：</p>
      <span>{{registrationTime}}</span>
      <div class="updata">
        <p>用户昵称：</p>
        <el-input placeholder="请输入内容" v-model="username" clearable></el-input>
        <p>用户手机号码：</p>
        <el-input placeholder="请输入内容" v-model="phoneNumber" clearable></el-input>
      </div>
      <el-button type="primary" @click="changeInfo">确认修改</el-button>
    </div>

    <div v-if="!isshow" class="up-info-body-div">
      <p>请输入要修改信息用户的通行证号码：</p>
      <el-input placeholder="请输入内容" v-model="userAccount" clearable></el-input>
      <el-button type="primary" @click="queryinfo" class="change">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username : '',
      phoneNumber :'',

      userAccount : '',
      userEmail :'',
      registrationTime :'',
      type :'',
      balance :'',

      isshow:false,
    }
  },

  methods:{
    async changeInfo(){
      const res =await this.$http.post('user/userChangeInfo',{
        userAccount : this.userAccount,
        userName : this.username,
        phoneNumber :this.phoneNumber
      })

      if(res.data.status == 0){
        this.$message({
          message :'用户基本信息更新成功',
          type: 'success'
        })
      }
    },

    async queryinfo(){

      this.isshow = true
      const res = await this.$http.post('user/userInfoQuery',{
      userAccount : this.userAccount
    })

    this.userAccount = window.sessionStorage.getItem('userAccount')
    this.username = res.data.data.username
    this.phoneNumber = res.data.data.phoneNumber 
    this.userEmail = res.data.data.email
    this.registrationTime = res.data.data.registrationTime
    this.type = res.data.data.userType
    this.balance = res.data.data.balance
    }
  },
}
</script>

<style>
.up-info-body{
  width: 80%;
  height: 80%;
  background-color: white;
  margin-left:120px;
  margin-top: 80px;

  opacity: 1;
  border-radius : 20px;
}

.info-body-div{
  width: 400px;
  margin-left: 190px;
  padding-top: 50px;
  font-size: 20px;
}

.info-body-div>p{
  margin-top: 30px;
}

.updata{
  position: absolute;
  top:200px;
  right: 600px;
  width: 300px;
}

.updata>p{
  margin-top: 50px;
}

.up-info-body-div{
  width: 500px;
  font-size: 20px;
  margin-left: 300px;
}

.up-info-body-div>p{
  padding-top: 200px;
  padding-bottom: 50px;
}
</style>